<template>
  <div class="document-detail">
    <header-bar title="办件详情"></header-bar>
    <div class="content-wrapper">
      <div class="content" ref="scroll">
        <group class="group" label-width="5em">
          <h3 slot="title" class="title">
            <div class="icon-wrapper">
               <icon :name="document.icon[0]" :scale="2"></icon>
            </div>
            <span>基本信息</span>
          </h3>
          <cell title="标题:" :value="document.title" value-align="left"></cell>
          <cell title="发件人:" :value="document.author" value-align="left"></cell>
          <cell title="发送时间:" :value="document.posttime" value-align="left"></cell>
          <cell title="内容:" :value="document.content" value-align="left"></cell>
        </group>

        <group label-width="5em" class="group group-2">
          <h3 slot="title" class="title">
            <div class="icon-wrapper">
              <icon :name="document.icon[1]" :scale="2"></icon>
            </div>
            <span>基本信息</span>
          </h3>
          <x-textarea title="审批意见:" v-model="document.comment" placeholder="请填写审批意见"></x-textarea>
        </group>

        <x-button class="submit-btn">确定</x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    XTextarea,
    XButton
  } from 'vux'
  import BScroll from 'better-scroll'
  import HeaderBar from '@/components/HeaderBar'
  
  export default{
    components: {
      Group,
      Cell,
      XTextarea,
      HeaderBar,
      XButton,
      
    },
    data(){
      return {
        scroll: null,
        document: {
          title: '2017年12月份工资表审批单',
          author: '张舜',
          icon:["circles","flag"],
          posttime: '2017-12-31',
          content: '2017年12月份工资表审批,请认真审批.2017年12月份工资表审批,请认真审批.2017年12月份工资表审批,请认真审批',
          comment: ''
        }
      }
    },
    methods: {
      _initScroll() {
        this.scroll = new BScroll(this.$refs.scroll)
      }
    },
    mounted(){
      setTimeout(()=>{
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';
   
  .document-detail{
    background-color: @color-background-main;
    .content-wrapper{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      width: 100%;
      .content{
        width: 100%;
        height: 100%;
        h3.title{
          display: flex;
          align-items: center;
          font-size: @font-size-normal;
          background-color: #fff;
          padding: 8px 0;
          .icon-wrapper{
            display: flex;
            align-items: center;
            width: 26px;
            height: 26px;
           /* border-radius: 50%;*/
          
          }
        }
        .group{
          background-color: #fff;
        }
        .group-2{
          margin-top: 20px;
        }
        .submit-btn{
          margin-top: 20px;
          width: 100%;
        }
      }
    }
  }
</style>

